<template>
  <a-menu-item v-if="!menuInfo.children || !menuInfo.children.length" :key="menuInfo.key">
    <template v-if="menuInfo.icon" #icon>
      <component v-if="isAntdIcon(menuInfo.icon)" :is="$antIcons[menuInfo.icon]" />
      <icon-font-cn v-else :type="menuInfo.icon"></icon-font-cn>
    </template>
    <span>{{ menuInfo.label }}</span>
  </a-menu-item>
  <a-sub-menu v-else :key="menuInfo.key">
    <template v-if="menuInfo.icon" #icon>
      <component v-if="isAntdIcon(menuInfo.icon)" :is="$antIcons[menuInfo.icon]" />
      <icon-font-cn v-else :type="menuInfo.icon"></icon-font-cn>
    </template>
    <template #title>
      <span>{{ menuInfo.label }}</span>
    </template>
    <submenu
      v-for="item in menuInfo.children"
      :key="item.key"
      :menuInfo="item"
      :isAntdIcon="isAntdIcon"
    />
  </a-sub-menu>
</template>

<script setup>
const props = defineProps({
  menuInfo: Object,
  isAntdIcon: Function
})
</script>

<style>
</style>